<template>
    <div class="table-page">
        <div class="table-search-box" @keyup.enter="search()">
            <div class="search-item">
                <label>起始IP：</label>
                <div class="table-query-input">
                    <el-input
                        v-model="queryData.startIp"
                        clearable
                        placeholder="起始IP"
                    ></el-input>
                </div>
            </div>
            <div class="search-item">
                <label>结束IP：</label>
                <div class="table-query-input">
                    <el-input
                        v-model="queryData.endIp"
                        clearable
                        placeholder="结束IP"
                    ></el-input>
                </div>
            </div>
            <div class="search-item">
                <label>机构名称：</label>
                <div class="table-query-input">
                    <el-input
                        v-model="queryData.groupName"
                        clearable
                        placeholder="机构名称"
                    ></el-input>
                </div>
            </div>
            <div class="search-item">
                <label>绑定时间：</label>
                <div class="table-query-input">
                    <el-date-picker
                        v-model="queryData.bindDay"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择绑定时间"
                    >
                    </el-date-picker>
                </div>
            </div>
            <!-- <div class="search-item">
                <label>IP到期时间：</label>
                <div class="table-query-input">
                    <el-date-picker
                        v-model="queryData.endTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择到期时间"
                    >
                    </el-date-picker>
                </div>
            </div> -->
            <div class="search-item">
                <label>机构到期时间：</label>
                <div class="table-query-input">
                    <el-date-picker
                        v-model="queryData.expireTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择到期时间"
                    >
                    </el-date-picker>
                </div>
            </div>
            <div class="search-item">
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    :loading="tableLoading"
                    @click="clickSearch()"
                    >搜索
                </el-button>
            </div>
            <div class="search-item">
                <el-button
                    icon="el-icon-refresh"
                    :loading="tableLoading"
                    @click="resetSearch()"
                    >重置
                </el-button>
            </div>
        </div>
        <div class="table-data-box">
            <el-table
                ref="table"
                v-loading="tableLoading"
                :data="tableData"
                border
                style="width: 100%;min-height:40em"
                row-key="id"
            >
                <el-table-column prop="ip" label="IP段" min-width="200"></el-table-column>
                <el-table-column
                    prop="startIp"
                    label="IP起段"
                ></el-table-column>
                <el-table-column prop="endIp" label="IP止段" min-width="100"></el-table-column>
                <el-table-column label="网段" min-width="100">
                    <template slot-scope="scope">
                        <div>{{ scope.row.wd }}/{{ scope.row.mask }}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="remark"
                    label="IP备注"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    prop="groupName"
                    label="绑定机构"
                ></el-table-column>
                <el-table-column
                    prop="bindTime"
                    label="绑定时间"
                ></el-table-column>
                <!-- <el-table-column
                    prop="endTime"
                    label="IP到期时间"
                ></el-table-column> -->
                <el-table-column
                    prop="expireTime"
                    label="机构到期时间"
                ></el-table-column>
                <el-table-column
                    prop="bindUserName"
                    label="操作者"
                ></el-table-column>
                <el-table-column
                    label="操作"
                    width="200"
                    align="center"
                    fixed="right"
                >
                    <template slot-scope="scope">
                        <el-button
                            v-if="!scope.row.edit"
                            lass="primary"
                            type="text"
                            size="mini"
                            icon="el-icon-edit"
                            :loading="scope.row.opLoading"
                            @click="clickSimpleEdit(scope.row, '修改机构IP')"
                            >修改
                        </el-button>
                        <el-button
                            v-if="!scope.row.edit"
                            lass="primary"
                            type="text"
                            size="mini"
                            icon="el-icon-delete"
                            :loading="scope.row.opLoading"
                            @click="
                                tableDelete(
                                    '/user/sys/group/ip/delete',
                                    {
                                        id: scope.row.id
                                    },
                                    true
                                )
                            "
                            >删除
                        </el-button>
                        <el-button
                        v-if="!scope.row.groupId"
                        lass="primary"
                        type="text"
                        size="mini"
                        icon="el-icon-edit"
                        :loading="scope.row.opLoading"
                        @click="
                           toReBind(scope.row,'关联机构')
                        "
                        >关联机构
                    </el-button>
                    <el-button
                        v-if="scope.row.groupId"
                        lass="primary"
                        type="text"
                        size="mini"
                        icon="el-icon-edit"
                        :loading="scope.row.opLoading"
                        @click="unBind(scope.row)"
                    >取消机构关联
                    </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div v-if="pageData.total" class="xy-between table-page-box">
            <el-pagination
                background
                :current-page.sync="pageData.currentPage"
                :page-sizes="pageData.pageSizes"
                :page-size.sync="pageData.pageSize"
                layout="total,  prev, pager, next, sizes, jumper"
                :total="pageData.total"
            >
            </el-pagination>
        </div>
        <el-dialog
            :title="dialogFormTitle"
            :visible.sync="dialogFormVisible"
            :before-close="dialogClose"
            :modal="false"
            custom-class="two-dialog"
        >
            <el-form
                ref="dataForm"
                :model="dataForm"
                label-width="8em"
                :rules="dataFormRule"
            >
                <el-form-item label="ip" prop="ip">
                    <el-input v-model="dataForm.ip"></el-input>
                </el-form-item>
                <el-form-item label="有效期" prop="endTime">
                    <el-date-picker
                        v-model="dataForm.endTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="IP有效期"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input
                        v-model="dataForm.remark"
                        type="textarea"
                        rows="5"
                    ></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button :loading="submitFlag" @click="dialogClose"
                    >取 消</el-button
                >
                <el-button :loading="submitFlag" type="primary" @click="ipSave"
                    >保 存</el-button
                >
            </span>
        </el-dialog>
        <el-dialog :title="reBindTitle" :visible.sync="reBindVisible" width="80%" :modal="false">
            <div class="el-dialog-div">
                <groupBindComponent
                    v-if="reBindVisible"
                    @bind="closeGroup"
                >
                </groupBindComponent>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { TablePage } from "@/layout/mixin/iVue.js";
import { mapState } from "vuex";
import { unBindIp, reBindIp } from "@/api/user";
import { post,put } from "@/api/request";
import { isIp } from "@/utils/validate";
import groupBindComponent from "@/views/models/vrs/group/groupBind";

export default {
    name: "GroupIpAll",
    components: {groupBindComponent},
    mixins: [TablePage],
    props: {
        groupId: {
            type: Number,
            default: null
        }
    },
    data() {
        return {
            queryData: {
                startIp: null,
                endIp: null,
                endTime: null,
                expireTime: null,
                groupName: null
            },
            dataFormRule: {},
            reBindVisible: null,
            reBind: null,
            reBindTitle:null
        };
    },
    computed: {
        ...mapState({})
    },
    watch: {},
    created() {
    },
    mounted() {},
    methods: {
        search(queryData) {
            this.loadTable("/user/sys/group/ip/page", queryData, true);
        },
        ipSave() {
            this.formDataSave("/user/sys/group/ip/update");
        },
        toReBind(data, title) {
            this.reBindVisible = true;
            this.reBindTitle = title;
            this.reBind = data;
        },
        unBind(data){
            this.$confirm('是否取消机构关联', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            put("/user/sys/group/ip/unRelation",{id:data.id}).then(res=>{
                this.search();
            })
        })

        },
        closeGroup(id){
        this.$confirm('是否关联该机构', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            this.reBind.groupId=id;
            put("/user/sys/group/ip/update",this.reBind).then(res=>{
                this.reBindVisible = false;
                this.search();
            }).catch(e=>{
                this.search();
            })
        })

        }

    }
};
</script>

<style lang="scss" scoped>
.school-logo {
    .logo-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 108px;
        height: 108px;
        line-height: 108px;
        text-align: center;
    }

    .logo-img {
        width: 108px;
        height: 108px;
        display: block;
    }
}

.table-edit-from {
    .address-select {
        width: 8em;
        margin-right: 2em;
    }
}
</style>
<style>
.school-logo .logo-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.school-logo .logo-uploader .el-upload:hover {
    border-color: #409eff;
}
</style>
